<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Data Tables</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{bower_components/font-awesome/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{bower_components/Ionicons/css/ionicons.min.css}">
  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css}">
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{dist/css/AdminLTE.min.css}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" th:href="@{dist/css/skins/_all-skins.min.css}">

</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">


  <div th:replace="/common/header :: header"></div>

  <!-- Left side column. contains the logo and sidebar -->

  <div th:replace="/common/aside :: aside"></div>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="row">
          <div class="col-md-6">
            <ol class="breadcrumb">
              <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li class="active"></li>              
            </ol>
      </div>
      </div>
     
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">酒店订单管理</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="mytable" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>预定用户</th>
                  <th>订单描述</th>
                  <th>订单状态</th>
                  <th>入住时间</th>
                  <th>预定时间</th>
                  <th>支付状态</th>
                  <th>支付金额</th>
                  <th>Operation</th>
                </tr>
                </thead>
                <tbody>
                <tbody>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>

                </tbody>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <div th:replace="/common/footer :: footer"></div>
 
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script th:src="@{bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{dist/js/demo.js}"></script>
<!-- page script -->
<script>
  $(function () {
    $('#mytable').DataTable({
      "language": {
                        "lengthMenu": "每页 _MENU_ 条记录",
                        "zeroRecords": "没有找到记录",
                        "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                        "infoEmpty": "无记录",
                        "infoFiltered": "(从 _MAX_ 条记录过滤)",
                        "search":"快速检索: ",
                        "oPaginate": {                          
                            "sPrevious": "上页",
                            "sNext": "下页"                           
                        }
                    }

    })

  })
</script>
</body>
</html>
